<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        #map{
            width: 600px;
            height: 600px;
            margin: 10px 100px;
            background-color: ghostwhite;
            display: flex;
            flex-wrap: wrap;
        }

        #map div{
            width: 200px;
            height: 200px;
            border: 1px yellow solid;
            box-sizing: border-box;
            position: relative;
        }

        /*圆球*/
        #map .yuan::before{
            content: "";
            position: absolute;
            left: 25px;
            top: 25px;
            width: 150px;
            height: 150px;
            border: 5px red solid;
            box-sizing: border-box;
            border-radius: 125px;
        }

        /*X 叉叉*/
        #map .error::before{
            content: "";
            position: absolute;
            left: -16px;
            top: 50px;
            width: 100px;
            height: 100px;
            border: 5px black solid;
            box-sizing: border-box;
            transform: rotateZ(45deg);
            border-bottom: none ;
            border-left: none ;
        }
        #map .error::after{
            content: "";
            position: absolute;
            right: -21px;
            top: 50px;
            width: 100px;
            height: 100px;
            border: 5px black solid;
            border-top: none ;
            border-right: none ;
            box-sizing: border-box;
            transform: rotateZ(45deg);
        }

        #map div:hover{
            width: 200px;
            height: 200px;
            border: 1px yellow solid;
            box-sizing: border-box;
            box-shadow: #7f807d 0px 0px 20px;
        }

        #map:hover{
            box-shadow: purple 0px 0px 10px;
        }

        .ease-in-out {
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        }

        .duration-500 {
            transition-property: all;
            transition-duration: .71s;
        }
    </style>

    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background: deepskyblue;
            margin: 20px auto;
            transition: 1s;
            transform-origin: left top ;
        }
        .box1{
            animation: name 2s infinite linear;
        }
        .box1:hover{
            transform: skew(45deg);
        }
        @keyframes name{
            0%{transform: skew(45deg);}
            50%{transform: skew(-45deg); transform-origin: right bottom; }
            100%{transform: skew(45deg);}
        }
        .main{
            width: 500px;
            margin: 50px;
        }
        .gameShow{
            width: 200px;
            height: 600px;
            margin:  10px  0px;
        }
        .player1,.player2{
            width: 150px;
            height: 50px;
            margin: auto;
            font-size: 30px;
            text-align: center;
        }
        .player1{
            color: red;
        }
        .player2{
            color: black;
        }

        .showTimePlayer{
            position: relative;
            animation: bilingbiling 1s alternate infinite;
        }
        .showTimePlayer:before{
            content: "";
            position: absolute;
            left: 10px;
            top: 10px;
            width: 30px;
            height: 30px;
            transition: 1s;
            background-color: greenyellow;
            border-radius: 50%;

        }

        .reset{
            width: 200px;
            height: 100px;
            background-color: #472d20;
            margin: 400px auto 0px;
            font-size: 30px;
            line-height: 100px;
            color: white;
            border-radius: 50px;
            text-align: center;
            transition: .2s;
        }

        .reset:hover{
            cursor: pointer;
            background-color: #917292;
            box-shadow: #38d4da 0px 0px 10px;
        }

        @keyframes bilingbiling {
            from{
                box-shadow: purple 0px 0px 0px;
            }
            to{
                box-shadow: purple 0px 0px 10px;
            }
        }



    </style>

</head>
<body style="display: flex ; justify-content: space-between">

    <div class="ease-in-out duration-500" id="map">
        <div title="" onclick="zhanDian(this)" class=""></div>
        <div title="" onclick="zhanDian(this)" class=""></div>
        <div title="" onclick="zhanDian(this)" class=""></div>
        <div title="" onclick="zhanDian(this)" class=""></div>
        <div title="" onclick="zhanDian(this)" class=""></div>
        <div title="" onclick="zhanDian(this)" class=""></div>
        <div title="" onclick="zhanDian(this)" class=""></div>
        <div title="" onclick="zhanDian(this)" class=""></div>
        <div title="" onclick="zhanDian(this)" class=""></div>
    </div>
    <div class="gameShow">
        <div class="player1 showTimePlayer">红圆</div>
        <div class="player2">黑叉</div>
        <div class="reset">重来一把！</div>
    </div>

    <div class="main">
        <div class="box box1">

        </div>
        <div class="box box2">

        </div>
        <div class="box box3">

        </div>
    </div>

    <script>

        var flag = true ;
        var player1 = document.getElementsByClassName("player1")[0]
        var player2 = document.getElementsByClassName("player2")[0]
        var reset = document.getElementsByClassName("reset")[0]
        var map = document.getElementById("map");

        function zhanDian(event){
            let target = event;
            if(target.title != ""){
                return
            }
            if(flag){
                flag = false;
                target.title= "yuan"
                target.classList.add("yuan")
                player2.classList.add("showTimePlayer")
                player1.classList.remove("showTimePlayer")
            }else{
                flag = true;
                target.title= "error"
                target.classList.add("error")
                player1.classList.add("showTimePlayer")
                player2.classList.remove("showTimePlayer")
            }
        }

        reset.onclick=function () {
            var children = map.children;
            for (let i = 0; i < children.length; i++) {
                console.log(children[i])
                children[i].classList.remove("yuan")
                children[i].classList.remove("error")
                children[i].title = ""
            }
            player1.classList.add("showTimePlayer")
            player2.classList.remove("showTimePlayer")
        }

    </script>

</body>
</html>